<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -行程安排</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}
/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">

	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>行程列表</h5>
					<div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px positon:relative; float: left; bottom: -5px;">
							<input id="startDateSearch" type="text" class="form-control "
								placeholder="请输入关键字（行程主题、内容）"/ > <span
								class="input-group-btn">
								<button onclick="Search()" class="btn btn-info btn-search">查找</button>
								<button id="add" class="btn btn-info btn-search"
									style="margin-left: 3px">添加</button>
							</span>
						</div>
						<table id="dataTables-example"
							class="table table-striped table-bordered table-hover dataTables-example">
							<thead>
								<tr style="height: 30px">
									<th style="width: 50px" align="center">序号</th>
									<th style="width: 200px" align="center">主题</th>
									<th style="width: 50px" align="center">类型</th>
									<th style="width: 110px" align="center">是否全天</th>
									<th style="width: 200px" align="center">开始时间</th>
									<th style="width: 200px" align="center">结束时间</th>
									<th style="width: 120px" align="center">相关客户</th>
									<th style="width: 500px" align="center">行程内容</th>
									<th style="width: 200px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id='addModal'>
		<div class="modal-dialog" style="width: 700px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>

					<h2 class="modal-title" align="center" id="title2">添加行程</h2>
				</div>

				<div class="modal-body" align="center">
					<form id="myFrom" enctype="multipart/form-data">
						<table align="center">
							<tr style="height: 40px">
								<td align="right"><label>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型<span
										style="color: red;">*</span>：
								</label></td>
								<td><input type="hidden" id="tripId" name="tripId" /> <input
									type="hidden" id="oper" name="oper" value="新增" /> <select
									class="form-control" name="tripType" id="tripType">
										<option value="拜访" selected="selected">拜访</option>
										<option value="出差">出差</option>
										<option value="回访">回访</option>
										<option value="调查">调查</option>
								</select></td>
							</tr>
							<tr style="height: 40px">
								<td align="right"><label>行程主题<span
										style="color: red;">*</span>：
								</label></td>
								<td><input type="text" name="tripTheme" id="tripTheme"
									class="form-control"> </textarea></td>
							</tr>
							<tr style="height: 40px">
								<td align="right"><label>是否全天<span
										style="color: red;">*</span>：
								</label></td>
								<td>
									<div class="radio i-checks" style="text-align: left;">
										<label><input id="isAllDay" name="isAllDay"
											type="radio" value="是" checked="checked">&nbsp;是</label> <label><input
											id="notAllDay" name="isAllDay" type="radio" value="否">&nbsp;否</label>
									</div>
								</td>
							</tr>
							<tr style="height: 40px">
								<td align="right"><label>开始时间<span
										style="color: red;">*</span>：</label></td>
								<td><input type="text" name="date1" id="date1"
									readonly="readonly" class="form-control"
									onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									placeholder="请选择开始日期"></td>
							</tr>
							<tr style="height: 40px">
								<td align="right"><label>结束时间<span
										style="color: red;">*</span>：</label></td>
								<td><input type="text" name="date2" id="date2"
									readonly="readonly" class="form-control"
									onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
									placeholder="请选择结束日期"></td>
							</tr>
							<tr style="height: 40px">
								<td align="right"><label>相关客户： </label></td>
								<td><input type="text" name="relatedCustomers"
									id="relatedCustomers" class="form-control"></td>
							</tr>
							<tr style="height: 120px">
								<td align="right"><label>行程内容<span
										style="color: red;">*</span>：
								</label></td>
								<td><textarea style="resize: none;" rows="5" cols="60"
										name="tripContent" id="tripContent" class="form-control"></textarea></td>
							</tr>
						</table>
					</form>

				</div>
				<div class="modal-footer" align="center">
					<div align="center" id="btd">
						<button class="btn btn-primary" id="btnAdd"
							onclick="addOrEdit('insert')">确认</button>
						<button class="btn btn-primary" id="btnEdit"
							onclick="addOrEdit('update')">确认</button>
						<button class="btn btn-primary" id="btnDetail"
							onclick="closeModal(addModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var table;
		$(function() {
			//提示信息
			var lang = {
				"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
				"sLengthMenu" : "每页 _MENU_ 项",
				"sZeroRecords" : "没有匹配结果",
				"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
				"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
				"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索:",
				"sUrl" : "",
				"sEmptyTable" : "表中数据为空",
				"sLoadingRecords" : "载入中...",
				"sInfoThousands" : ",",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上页",
					"sNext" : "下页",
					"sLast" : "末页",
					"sJump" : "跳转"
				},
				"oAria" : {
					"sSortAscending" : ": 以升序排列此列",
					"sSortDescending" : ": 以降序排列此列"
				}
			};

			//初始化表格
			table = $("#dataTables-example")
					.dataTable(
							{

								"fnDrawCallback" : function() {
									var api = this.api();
									var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
									api.column(0).nodes().each(
											function(cell, i) {
												cell.innerHTML = startIndex + i
														+ 1;
											});
								},
								language : lang, //提示信息
								autoWidth : false, //禁用自动调整列宽
								stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
								processing : true, //隐藏加载提示,自行处理
								serverSide : true, //启用服务器端分页
								searching : false, //禁用原生搜索
								orderMulti : false, //启用多列排序
								order : [], //取消默认排序查询,否则复选框一列会出现小箭头
								renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
								pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
								"bLengthChange" : false,
								ordering : false, //关闭排序图标
								ajax : function(data, callback, settings) {
									//封装请求参数
									var param = {};
									param.limit = 10;//页面显示记录条数，在页面显示每页显示多少项的时候
									param.start = data.start;//开始的记录序号
									param.page = (data.start / data.length) + 1;//当前页码
									//param.darw=darw;  //计数器
									var startDate = $("#startDateSearch").val()
											.trim();
									if (startDate != null && startDate != "") {
										param.tripName = startDate
									}
									//console.log(param);
									//ajax请求数据
									$
											.ajax({
												type : "POST",
												url : "tripList.do",
												cache : false, //禁用缓存
												data : param, //传入组装的参数
												dataType : "json",
												success : function(result) {

													//console.log(result);
													//setTimeout仅为测试延迟效果
													setTimeout(
															function() {
																//封装返回数据
																var returnData = {};
																draw = result.draw;//后台返回的计数器
																returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
																returnData.recordsTotal = result.total;//返回数据全部记录
																returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
																returnData.data = result.data;//返回的数据列表
																//console.log(returnData);
																//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
																//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
																callback(returnData);
															}, 200);
												}
											});
								},
								//列表表头字段
								columns : [
										{
											"data" : null
										},
										{
											"data" : "tripTheme"
										},
										{
											"data" : "tripType"
										},
										{
											"data" : "isAllDay"
										},
										{
											"data" : function(data) {
												return toDateTime(data.startDate);
											}
										},
										{
											"data" : function(data) {
												return toDateTime(data.endDate);
											}
										},
										{
											"data" : "relatedCustomers"
										},
										{
											"data" : function(data) {
													if(data.tripContent.length>20){
														return data.tripContent
														.substring(0, 20)
														+ "...";
													}else{
														return data.tripContent
														.substring(0, 20);
													}
											}
										} ],
								columnDefs : [ {
									"targets" : [ 8 ], //第七列加一条 自定义列
									"data" : "tripId", //数据列名
									"render" : function(data, type, full) { //返回自定义的内容

										return "<a class=\"btn btn-info btn-xs\" onClick=\"detailTrip("
										+ data + ");\">详情</a> "
										+"<a class=\"btn btn-primary  btn-xs\" onClick=\"editTrip("
												+ data
												+ ");\">编辑</a> "
												+ "<a class=\"btn btn-danger btn-xs\" onClick=\"delActivity("
												+ data + ");\">删除</a> ";
									}
								} ]
							})//.api();	
		})
		$("#add").click(function() {
			$("#title2").html("添加行程");
			$('#tripTheme').removeAttr("disabled");
			$('#isAllDay').removeAttr("disabled");
			$('#notAllDay').removeAttr("disabled");
			$('#isAllDay').attr("checked","checked");
			$('#isAllDay').parent().addClass("checked");
			$('#notAllDay').removeAttr("checked");
			$('#notAllDay').parent().removeClass("checked");
			//$('#notAllDay').removeAttr("checked");
			$('#date1').removeAttr("disabled");
			$('#date2').removeAttr("disabled");
			$('#relatedCustomers').removeAttr("disabled");
			$('#relatedOpportunities').removeAttr("disabled");
			$('#relatedPersonnel').removeAttr("disabled");
			$('#tripType').removeAttr("disabled");
			$('#tripContent').removeAttr("disabled");
			$('#myFrom')[0].reset();
			$("#tripId").val("");
			$("#date1").val("");
			$("#date2").val("");
			$("#relatedCustomers").val("");
			$("#relatedOpportunities").val("");
			$("#relatedPersonnel").val("");
			$("#tripTheme").val("");
			$("#oper").val("新增");
			// 									$("#isAllDay").val("");
			// 									$("#notAllDay").val("");
			$("#addModal").modal("show");
			// 									$("#btd").show();
			// 									document.getElementById("btnAdd").style.display="";
			// 									document.getElementById("btnEdit").style.display="none";
			$("#btnAdd").show();
			$("#btnEdit").hide();
			$("#btnDetail").hide();
		})
		//添加通知操作
		function addOrEdit(type) {
			var url = (type == 'insert' ? "insertTrip.do" : "updateTrip.do");
			var date1 = $("#date1").val();
			var tripTheme = $("#tripTheme").val();
			var date2 = $("#date2").val();
			var tripContent = $("#tripContent").val();
			if(date1>date2){
				swal("温馨提示!", "结束时间不能小于开始时间！", "error");
				return false;
			}
			if (tripTheme == "") {
				swal("温馨提示!", "请输入行程标题!", "error");
				return false;
			}
			if (date1 == "") {
				swal("温馨提示!", "请选择开始时间!", "error");
				return false;
			}
			if (date2 == "") {
				swal("温馨提示!", "请输入结束时间!", "error");
				return false;
			}
			if (tripContent == "") {
				swal("温馨提示!", "请输入行程内容!", "error");
				return false;
			}
			$.ajax({
				url : url,
				data : $("#myFrom").serializeArray(),
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 1) {
						swal({
							title : "提示",
							text : "操作成功！",
							type : "success",
							confirmButtonText : "确定"
						}, function() {
							Search();
							$("#addModal").modal("hide");
						});

					} else {
						sweetAlert("提示", "未知异常!", "error");
					}

				},
				error : function() {
					sweetAlert("异常", "网络出现异常!", "error");
				}

			});// ajax end;
		}; //添加行程 end
		function Search() {
			/* var oSettings = table.fnSettings();  
			oSettings._iDisplayStart = 0;  
			table.fnDraw(oSettings);   */
			table.fnDraw();
		}
		function delActivity(id) {
			swal({
				title : "您确定要删除这条信息吗",
				text : "删除后将无法恢复，请谨慎操作！",
				type : "warning",
				showCancelButton : true,
				confirmButtonColor : "#DD6B55",
				confirmButtonText : "删除",
				cancelButtonText : "取消",
				closeOnConfirm : false
			}, function() {

				$.ajax({
					url : "delTrip.do",
					data : {
						id : id
					},
					type : "post",
					dataType : "json",
					success : function(result) {
						if (result.code == 1) {
							swal({
								title : "提示",
								text : '删除成功',
								type : "success",
								confirmButtonColor : "#DD6B55",
								confirmButtonText : "确定",
								closeOnConfirm : true
							}, function() {
								Search();
							});

						} else {
							sweetAlert("提示", "删除失败!", "error");
						}

					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
			});
		}
		function editTrip(id) {
			$("#addModal").modal("show");
			$('#tripTheme').removeAttr("disabled");
			$('#isAllDay').removeAttr("disabled");
			$('#notAllDay').removeAttr("disabled");
			$('#date1').removeAttr("disabled");
			$('#date2').removeAttr("disabled");
			$('#relatedCustomers').removeAttr("disabled");
			$('#relatedOpportunities').removeAttr("disabled");
			$('#relatedPersonnel').removeAttr("disabled");
			$('#tripType').removeAttr("disabled");
			$('#tripContent').removeAttr("disabled");
			// 				$("#btd").show();
			// 				document.getElementById("btnAdd").style.display="none";
			// 				document.getElementById("btnEdit").style.display="";
			$("#btnAdd").hide();
			$("#btnEdit").show();
			$("#btnDetail").hide();

			$.ajax({
				url : "editTrip.do",
				data : {
					id : id
				},
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 1) {
						$("#title2").html("编辑行程");
						$("#oper").val("修改");
						$("#tripId").val(result.trip.tripId);
						$("#tripType").val(result.trip.tripType);
						$("#date1").val(toDateTime(result.trip.startDate));
						$("#date2").val(toDateTime(result.trip.endDate));
						$("#relatedCustomers").val(result.trip.relatedCustomers);
						$("#tripTheme").val(result.trip.tripTheme);
						$("#tripContent").val(result.trip.tripContent);
						if (result.trip.isAllDay != null
								&& result.trip.isAllDay != "") {
							$(
									":radio[name='isAllDay'][value='"
											+ result.trip.isAllDay + "']")
									.iCheck('check');
						}
						$("#btnAdd").val("修改");
					} else {
						sweetAlert("提示", "获取失败!", "error");
					}

				},
				error : function() {
					sweetAlert("异常", "网络出现异常!", "error");
				}

			});// ajax end;
		}
		function detailTrip(id) {
			$("#addModal").modal("show");
			$('#tripTheme').prop("disabled","true");
			$('#isAllDay').prop("disabled","true");
			$('#notAllDay').prop("disabled","true");
			$('#date1').prop("disabled","true");
			$('#date2').prop("disabled","true");
			$('#relatedCustomers').prop("disabled","true");
			$('#relatedOpportunities').prop("disabled","true");
			$('#relatedPersonnel').prop("disabled","true");
			$('#tripType').prop("disabled","true");
			$('#tripContent').prop("disabled","true");
			// 				$("#btd").show();
			// 				document.getElementById("btnAdd").style.display="none";
			// 				document.getElementById("btnEdit").style.display="";
			$("#btnAdd").hide();
			$("#btnEdit").hide();
			$("#btnDetail").show();
			if(date1>date2){
				swal("温馨提示!", "结束时间不能小于开始时间！", "error");
				return false;
			}
			if (tripTheme == "") {
				swal("温馨提示!", "请输入行程标题!", "error");
				return false;
			}
			if (date1 == "") {
				swal("温馨提示!", "请选择开始时间!", "error");
				return false;
			}
			if (date2 == "") {
				swal("温馨提示!", "请输入结束时间!", "error");
				return false;
			}
			if (tripContent == "") {
				swal("温馨提示!", "请输入行程内容!", "error");
				return false;
			}
			
			$.ajax({
				url : "editTrip.do",
				data : {
					id : id
				},
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 1) {
						$("#title2").html("编辑行程");
						$("#oper").val("修改");
						$("#tripId").val(result.trip.tripId);
						$("#tripType").val(result.trip.tripType);
						$("#date1").val(toDateTime(result.trip.startDate));
						$("#date2").val(toDateTime(result.trip.endDate));
						$("#relatedCustomers")
								.val(result.trip.relatedCustomers);
						$("#tripTheme").val(result.trip.tripTheme);
						$("#tripContent").val(result.trip.tripContent);
						if (result.trip.isAllDay != null
								&& result.trip.isAllDay != "") {
							$(
									":radio[name='isAllDay'][value='"
											+ result.trip.isAllDay + "']")
									.iCheck('check');
						}
						$("#btnAdd").val("修改");
					} else {
						sweetAlert("提示", "获取失败!", "error");
					}

				},
				error : function() {
					sweetAlert("异常", "网络出现异常!", "error");
				}

			});// ajax end;
		}
		//单选框样式
		$(document).ready(function() {
			$(".i-checks").iCheck({
				checkboxClass : "icheckbox_square-green",
				radioClass : "iradio_square-green",
			})
		});

		 //关闭模态框方法
		 function closeModal(modal) {
			$(modal).modal("hide");
		}
	</script>
</body>

</html>
